<!DOCTYPE html>
<link rel="stylesheet" href="/assets/css/admin.css" />
<link rel="stylesheet" href="/assets/css/admin.dark.css" />
<link rel="stylesheet" href="/pear/css/pear.css" />
<div style="padding: 16px;">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <div class="layui-colla-title">搜索</div>
                    <div class="layui-colla-content">
                        <form class="layui-form top-search-from">
                            <div class="layui-form-item">
                                <label class="layui-form-label">扩展名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="ext" value="" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">名字</label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" value="" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">创建时间</label>
                                <div class="layui-input-inline" id="create_time">
                                    <input type="text" autocomplete="off" name="create_time[]" id="create_time-start"
                                        class="layui-input line-block" placeholder="开始时间">
                                    <span>-</span>
                                    <input type="text" autocomplete="off" name="create_time[]" id="create_time-end"
                                        class="layui-input line-block" placeholder="结束时间">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-inline">
                                    <button class="layui-btn layui-btn-md" type="submit" lay-submit
                                        lay-filter="table-query">
                                        <i class="layui-icon layui-icon-search"></i>查询
                                    </button>
                                    <button type="reset" class="layui-btn layui-btn-md layui-btn-primary"
                                        lay-filter="table-reset">
                                        <i class="layui-icon layui-icon-refresh"></i>重置
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <table class="layui-hide" id="kb-table" lay-filter="kb-table"></table>
        </div>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm upload">
            <i class="layui-icon layui-icon-upload"></i>上传
        </button>
        <button class="layui-btn layui-btn-sm layui-bg-red" lay-event="dels">
            <i class="layui-icon layui-icon-delete"></i>删除
        </button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <button class="layui-btn layui-btn-xs" lay-event="more">
        更多<i class="layui-icon layui-icon-down"></i>
    </button>
</script>
<script src="/layui/layui.js"></script>
<script src="/pear/pear.js"></script>
<script>

    const QUERY_URL = `{:route('admin.attachment.query')}`;
    const UPLOAD_URL = `{:route('admin.attachment.upload')}`;
    const EDIT_URL = `{:route('admin.attachment.edit')}`;
    const DEL_URL = `{:route('admin.attachment.del')}`;

    layui.use(["table", "common", "dropdown", "upload", "laydate", "form"], function () {
        let table = layui.table;
        let common = layui.common;
        let dropdown = layui.dropdown;
        let upload = layui.upload;
        let laydate = layui.laydate;
        let form = layui.form;

        let cols = [[
            { type: 'checkbox', fixed: 'left' },
            { field: 'id', fixed: 'left', width: 80, title: 'ID', sort: true },
            { field: 'name', title: '名称' },
            {
                field: 'url', title: '文件', templet: function (d) {
                    return `<img src="${d.url}" class="attachment-img" data-title="${d.name}" />`;
                }
            },
            { field: 'admin_id', title: '管理员', hide: true },
            { field: 'user_id', title: '用户', hide: true },
            {
                field: 'file_size', title: '大小', templet: function (d) {
                    return formatSize(d.file_size);
                }
            },
            { field: 'mime_type', title: 'mime类型' },
            { field: 'ext', title: '后缀' },
            { field: 'storage', title: '存储位置' },
            { field: 'create_time', title: '创建时间', hide: true },
            { field: 'update_time', title: '更新时间', hide: true },
            { fixed: 'right', title: '操作', minWidth: 85, toolbar: '#barDemo' }
        ]];

        // 创建渲染实例
        table.render({
            elem: '#kb-table',
            url: QUERY_URL,
            method: 'post',
            toolbar: '#toolbarDemo',
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'kb-refresh',
                icon: 'layui-icon-refresh'
            }, 'filter', 'exports', 'print',],
            cols: cols,
            cellMinWidth: 80,
            skin: "line",
            size: "lg",
            page: true,
            limit: 10,
            limits: [10, 25, 50, 100]
        });

        // 搜索提交
        form.on('submit(table-query)', function (data) {
            var field = data.field; // 获得表单字段
            // 执行搜索重载
            table.reload('kb-table', {
                page: {
                    curr: 1 // 重新从第 1 页开始
                },
                where: { where: common.convertObject(field) } // 搜索的字段
            });
            return false; // 阻止默认 form 跳转
        });

        // 上传
        let uploading;
        upload.render({
            elem: '.upload', // 绑定多个元素
            url: UPLOAD_URL, // 此处配置你自己的上传接口即可
            accept: 'file', // 普通文件
            multiple: true, // 多文件
            number: 10,
            before: function (obj) {
                uploading = layer.load(0); // 上传 loading
            },
            done: function (res, index, upload) {
                if (res.code != 0) {
                    layer.msg(res.msg);
                }
            },
            allDone: function (obj) {
                layer.msg("总数：" + obj.total + "  成功数：" + obj.successful + "  失败数：" + obj.failed);
                common.refreshTable("kb-table")
                layer.close(uploading)
            }
        });

        // 查看文件
        common.openFiles(".attachment-img");

        // 工具栏事件
        table.on('toolbar(kb-table)', function (obj) {
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch (obj.event) {
                case 'dels':
                    if (checkStatus.data.length) {
                        common.tableRemove(DEL_URL, { ids: checkStatus.data.map(v => v.id) })
                    } else {
                        layer.msg("请勾选数据")
                    }
                    break;
                case 'kb-refresh':
                    common.refreshTable("kb-table")
                    break;
            };
        });

        // 删除或编辑行事件
        table.on("tool(kb-table)", function (obj) {
            var that = this;
            var data = obj.data;
            if (obj.event === "more") {
                dropdown.render({
                    elem: that,
                    show: true, // 外部事件触发即显示
                    data: [{
                        title: '编辑',
                        id: 'edit'
                    }, {
                        title: '删除',
                        id: 'del'
                    }],
                    click: function (data, othis) {
                        if (data.id === 'del') {
                            common.tableRemove(DEL_URL, { ids: obj.data.id })
                        } else {
                            common.open(EDIT_URL + "?id=" + obj.data.id, "编辑")
                        }
                    }
                })
            }
        });

        // 日期范围 - 左右面板联动选择模式
        laydate.render({
            elem: '#create_time',
            range: ['#create_time-start', '#create_time-end'],
            type: 'datetime',
            rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
        });

        // 格式化文件大小
        let formatSize = function (value) {
            if (null == value || "" === value) {
                return "0 Bytes";
            }
            let unitArr = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
            let index = 0;
            let srcSize = parseFloat(value);
            index = Math.floor(Math.log(srcSize) / Math.log(1024));
            let size = srcSize / Math.pow(1024, index);
            size = size.toFixed(2);
            return size + unitArr[index];
        }
    });
</script>